@import "@/styles/variables.scss";

@mixin setDialogSize($name, $maxWidth) {
    //&.sc-dialog-#{$name} {
    .sc-dialog-#{$name} {
        max-width: $maxWidth;
        width: 90%;

        >.el-dialog {
            max-width: $maxWidth;
        }
    }
}

.sc-dialog,
.sc-dialog-custom {
    .el-dialog__header {
        .el-dialog__title {
            font-size: 16px;
        }
    }
}

/* 弹框标准样式 */
.sc-dialog {
    .el-dialog__body {
        padding: 4px 20px 24px;

        /* 表单内弹窗 */
        .el-form-item__label {
            color: $text;
            // 本来就是单独暂一行。不需要浮动
            float: none;
        }

        .el-form-item__error {
            color: #ff4949
        }
    }
}

/* 完全自定义弹框，包括标题 */
.sc-dialog-custom {
    .el-dialog__header {
        padding: 0;

        .el-dialog__headerbtn {
            z-index: 999;
        }
    }

    .el-dialog__body {
        padding: 0;
        border-radius: 0 0 6px 6px;
    }
}

@include setDialogSize("tagspool", 1000px);
@include setDialogSize("medium", 900px);
@include setDialogSize("small", 600px);
@include setDialogSize("mini", 400px);

.el-dialog span.sc-text-btn-process {
    @extend .sc-text-btn-process;
}

/* 弹框内-tab样式标题 */
.sc-popper-title-tab {
    display: flex;
    flex-direction: column;
    height: 100%;

    .el-tabs__header {
        padding: 0 16px;
        margin: 0;
        background-color: #2b2e39;
        border-radius: 4px 4px 0 0;

        /* tab 下面的边框 */
        .el-tabs__nav-wrap::after {
            content: none;
        }

        .el-tabs__item {
            font-size: 14px;
            height: 36px;
            font-weight: bold;
            color: #aeb1c0;
            padding: 0;

            &.is-active {
                color: $green;
            }

            &::before {
                content: "\00a0\00a0";
            }

            &::after {
                content: "\00a0\00a0";
            }
        }
    }

    .el-tabs__content {
        flex-grow: 1;

        .el-tab-pane {
            height: 100%;
            box-sizing: border-box;
        }
    }
}

/* 模拟弹窗内-关闭按钮 */
.sc-dialog-close-btn {
    padding: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #909399;
}

.el-popper.sc-popper {
    .sc-text-info {
        color: #5e6270;
    }
}

/* 像弹窗一样的弹出层 参考 TagsPop.vue */
.sc-layer {
    background: #323642;
    border-radius: 4px;
    color: #aeb1c0;
}

// 支付弹窗title单独背景色
.sc-title-bg {
    .el-dialog__header {
        background: #2B2E39;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .el-dialog__body {
        padding: 0;
    }

    .el-dialog__footer {
        padding-top: 0;
    }
}

.sc-layer,
[class*="sc-dialog"],
.el-popper.sc-popper {
    .el-loading-mask {
        background-color: transparent;
    }
}